import React, { Component } from 'react';
import './login.css';
import Title from './component/Title';
import Slogan from './component/Slogan';
import UsernameInput from './component/UsernameInput';
import PasswordInput from './component/PasswordInput';
import { Link } from 'react-router-dom';
import {Toast} from 'antd-mobile';
import { post, http, saveToken, reflashHttp } from '../../Lib/Http';
import apiUrl from '../../Config/web';



class Register extends Component {

    constructor(props){
        super(props);

        this.state = {
            username:'',
            password:'',
            password_confirm:''
        }

        this.checkError = '';

    }

    componentDidMount(){
        let that = this;
        let _b_url = that.props.history.location.pathname;
        window._hmt.push(['_trackPageview', _b_url]);
    }

    //设置密码
    setUsername(value){
        this.setState({
            username:value
        });
    }

    //设置密码
    setPassword(password){
        this.setState({
            password:password
        });
    }

    //确认密码
    passwordConfirm(password){
        this.setState({
            password_confirm:password
        });
    }

    //提交注册
    postRegister(){

        if(!this.checkParamAndHinit()){
            Toast.info(this.checkError, 2);
            return;
        }

        Toast.loading('Loading...', 1000);

        post(apiUrl.register, {
            username:this.state.username,
            password:this.state.password,
            password_confirmation:this.state.password_confirm
        }, (success)=>{

            Toast.hide();
    
            let data = success.data;

            saveToken(data);

            reflashHttp();

            this.props.history.push('/help');

        }, 
        function(error){
            

            Toast.hide();

            if(error.response === undefined){
                return;
            }

            if(error.response.status !== 422){
                Toast.info('服务器出错');
            }
            

            let data = error.response.data;

            let errors = data.errors;

            for (let i in errors){

                Toast.info(errors[i][0]);

                break;

            }



        });


    }

    checkParamAndHinit(){


        if(this.state.username === ''){
            this.checkError = '邮箱不能为空';
            return false;
        }


        if(this.state.password === ''){
            this.checkError = '密码不能为空';
            return false;
        }

        if(this.state.password_confirm === ''){
            this.checkError = '确认密码不能为空';
            return false;
        }


        if(this.state.password !== this.state.password_confirm){
            this.checkError = '两次密码不一致';
            return false;
        }

        let reg = /^[\w\d]{1,32}-{0,2}[\w\d]{0,32}@[\w\d]{0,}.com$/g

        if(!reg.test(this.state.username)){
            this.checkError = '邮箱不合法';
            return false;
        }

        if(this.state.password.length < 6){
            this.checkError = '密码最少6位';
            return false;
        }

        return true;

    }


    render() {
        return (
            <div className='root background-white'>
                <Title title='注册' />

                <div className='auth-login-form-box'>
                    <div className='auth-login-form-wrapper'>

                        <Slogan />

                        <UsernameInput type="email" placeholder="请输入邮箱" getValue={this.setUsername.bind(this)} />

                        <PasswordInput getValue={this.setPassword.bind(this)} />

                        <PasswordInput
                            getValue={this.passwordConfirm.bind(this)}
                           placeholder = '请确认密码'
                        />

                        <div className='forget-password-box'>
                            <Link className='forget-password' to='/login'>登录</Link>
                        </div>

                        <div onClick={(e)=>{this.postRegister(e)}} className='login-button'>
                            注册
                        </div>
                        

                    </div>
                </div>    

            </div>
        );
    }
}

export default Register;